<template>
	<view class="content" :style="{height:windowHeight1 + 44} " scroll-y>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<u-toast ref="uToast" />
		<view class="back">
			<u-toast ref="uToast" />
			<view class="left" @tap="goback">
				<u-icon name="arrow-leftward" size="45"></u-icon>
			</view>
			<view class="right">
				<input type="text" v-model:value="searchmsg" >
				<u-icon @click="clear" name="close"></u-icon>
			</view>
		</view>
		<view>
			<u-tabs-swiper bg-color="#F5F5F5" :current="current" @change="change" inactive-color="#606266"
				active-color="red" ref="tabs" :list="list">
			</u-tabs-swiper>
			<!-- 状态栏 -->
			<swiper :style="{height:windowHeight1}" :current="swiperCurrent">
				<swiper-item style="height: 100%;" @change='swiperchange'>
					<scroll-view class="swiper-item" :style="{height:windowHeight}" scroll-y>

						<view v-if="getdanqu !== ''">
							<single :getdanqu='getdanqu.slice(0,5)'></single>

							<view class="next" @tap="sendto('1')">查看更多 <text
									style="color:#132485;">{{searchname}}</text> 单曲
								<u-icon name="arrow-down"></u-icon>
							</view>
						</view>

						<!-- 综合模块歌单 -->
						<view v-if="songlist !== ''">
							<songlist :songlist="songlist.slice(0,5)"></songlist>
							<view class="next" @tap="sendto('2')">查看更多 <text
									style="color:#132485;">{{searchname}}</text> 歌单
								<u-icon name="arrow-down"></u-icon>
							</view>
						</view>
						<!--综合 视频 -->
						<view v-if="mv !== ''">
							<vudiolist :mv="mv.slice(0,5)"></vudiolist>
							<view class="next" @tap="sendto('3')">查看更多 <text
									style="color:#132485;">{{searchname}}</text> 视频
								<u-icon name="arrow-down"></u-icon>
							</view>
						</view>

						<!-- 综合 艺人 -->
						<view v-if="artist !== ''">
							<aristlist :artist="artist.slice(0,5)"></aristlist>
							<view class="next" @tap="sendto('4')">查看更多 <text
									style="color:#132485;">{{searchname}}</text> 歌手
								<u-icon name="arrow-down"></u-icon>
							</view>
						</view>

						<!-- 综合 专辑 -->
						<view v-if="albums !== ''">
							<albumlist :albums="albums.slice(0,3)"></albumlist>
							<view class="next" @tap="sendto('5')">查看更多
								<text style="color: #132485">{{searchname}}</text> 专辑
								<u-icon name="arrow-down"></u-icon>
							</view>
						</view>

						<!-- 综合 播单 -->
						<view v-if="radio !==''">
							<broadcast :radio="radio.slice(0,3)"></broadcast>
							<view class="next" @tap="sendto('6')">查看全部{{radioLength}}个播单
								<u-icon name="arrow-down"></u-icon>
							</view>
						</view>

						<!-- 综合 用户 -->
						<view v-if="users !==''">
							<userlist :users="users.slice(0,1)"></userlist>
							<view class="next" @tap="sendto('7')">查看全部{{userLength}}个用户
								<u-icon name="arrow-down"></u-icon>
							</view>
						</view>

					</scroll-view>
				</swiper-item>
				<!-- 综合 结尾 -->

				<!-- 单曲 -->
				<swiper-item>
					<scroll-view class="swiper-item" :style="{height:windowHeight}" scroll-y>
						<single :getdanqu='getdanqu'></single>
					</scroll-view>
				</swiper-item>

				<!-- 歌单 -->
				<swiper-item>
					<scroll-view class="swiper-item" :style="{height:windowHeight}" scroll-y>
						<songlist :songlist="songlist"></songlist>
					</scroll-view>
				</swiper-item>

				<!-- 视频 -->
				<swiper-item>
					<scroll-view class="swiper-item" :style="{height:windowHeight}" scroll-y>
						<vudiolist :mv="mv"></vudiolist>
					</scroll-view>
				</swiper-item>

				<!-- 歌手 -->
				<swiper-item>
					<scroll-view class="swiper-item" :style="{height:windowHeight}" scroll-y>
						<aristlist :artist="artist"></aristlist>
					</scroll-view>
				</swiper-item>

				<!-- 专辑 -->
				<swiper-item>
					<scroll-view class="swiper-item" :style="{height:windowHeight}" scroll-y>
						<albumlist :albums="albums"></albumlist>
					</scroll-view>
				</swiper-item>

				<!-- 播客 -->
				<swiper-item>
					<scroll-view class="swiper-item" :style="{height:windowHeight}" scroll-y>
						<broadcast :radio="radio"></broadcast>
					</scroll-view>
				</swiper-item>

				<!-- 用户 -->
				<swiper-item>
					<scroll-view class="swiper-item" :style="{height:windowHeight}" scroll-y>
						<userlist :users="users"></userlist>
					</scroll-view>
				</swiper-item>

			</swiper>
		</view>
		<view style="position: fixed;bottom: 0;width: 100%;">
			<play></play>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import play from '../../components/play.vue'
	import {
		getCloudsearch,
		getMv,
		getArtist,
		getAlbums,
		getPodcast,
		getUsers
	} from '@/network/search2.js'

	import single from '../single/single.vue'
	import songlist from '../songlist/songlist.vue'
	import vudiolist from '../vudiolist/vudiolist.vue'
	import aristlist from '../aristlist/aristlist.vue'
	import albumlist from '../albumlist/albumlist.vue'
	import broadcast from '../broadcast/broadcast.vue'
	import userlist from '../userlist/userlist.vue'
	export default {
		data() {
			return {
				searchmsg: "",
				current: "0",
				swiperCurrent: "0",
				windowHeight: '', //屏幕高度
				windowHeight1: '',
				list: [{
						name: '综合'
					},
					{
						name: '单曲'
					},
					{
						name: '歌单'
					},
					{
						name: '视频'
					},
					{
						name: '歌手'
					},
					{
						name: '专辑'
					},
					{
						name: '播单'
					},
					{
						name: '用户'
					},
				],
				songlist: [], //歌单数据
				mv: [], //mv数据，
				artist: [], //艺人数据
				albums: [], //专辑数据
				radioLength: '', //播单总数
				radio: [], //播单数据
				userLength: '', //用户数量总数
				users: [], //用户数据
			}
		},
		components: {
			single,
			play,
			songlist,
			vudiolist,
			aristlist,
			albumlist,
			broadcast,
			userlist
		},
		methods: {
			// 获取歌单
			_getgedanlist() {
				getCloudsearch(this.searchname).then(res => {
					this.songlist = res.result.playlists
				})
			},

			// 获取视频
			_getMv() {
				getMv(this.searchname).then(res => {
					this.mv = res.result.videos
				})
			},
			// 获取艺人
			_getArtist() {
				getArtist(this.searchmsg).then(res => {
					this.artist = res.result.artists
				})
			},
			// 获取专辑
			_getAlbums() {
				getAlbums(this.searchmsg).then(res => {
					this.albums = res.result.albums
				})
			},
			// 获取播单
			_getPodcast() {
				getPodcast(this.searchmsg).then(res => {
					this.radioLength = res.result.djRadiosCount
					this.radio = res.result.djRadios
				})
			},
			// 获取用户
			_getUsers() {
				getUsers(this.searchmsg).then(res => {
					console.log(res);
					this.userLength = res.result.userprofileCount
					this.users = res.result.userprofiles
				})
			},
			sendto(id) {
				this.current = id
				this.swiperCurrent = id
			}, //切换 栏

			//回到上一级
			goback() {
				uni.redirectTo({
					url: "/subpag/search/search"
				})
			},
			change(index) {
				this.current = index
				this.swiperCurrent = index
			}, //点击选中哪个tab为激活状态
			clear() {
				this.goback()
				this.searchmsg = ''
			}, //清除搜索框记录
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.searchmsg = option.search
			
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = (res.windowHeight - 120) + 'px'
					this.windowHeight1 = (res.windowHeight) + 'px'
				}
			})
		},
		mounted() {
			this.searchmsg = this.searchname
			this._getgedanlist()
			this._getMv()
			this._getArtist()
			this._getAlbums()
			this._getPodcast()
			this._getUsers()
		},
		computed: {
			...mapState(['searchlist', 'searchname']),
			getdanqu() {
				return this.searchlist
			}, //切割五条数据渲染到综合列表'


		},
	}
</script>

<style scoped lang="scss">
	//综合
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.back {
		display: flex;
		padding: 30rpx;
		align-items: center;

		.right {
			display: flex;
			align-items: center;
			justify-content: space-between;

			color:#383838 input {
				color: #BBBBBB;
			}

			border-bottom: 1px solid #BDBDBD;
			width: 100%;
			margin-left: 20rpx;
			padding: 10rpx 0;
		}
	}

	.content {
		position: relative;
		font-family: STXihei;
		background-color: #F5F5F5;
	}

	//综合专辑区域
	.albumImg::before {
		position: absolute;
		content: '';
		left: 0;
		top: -8px;
		background: url(../../static/icon/disc.png);
		width: 100upx;
		background-size: 100upx;
		height: 100upx;
	}

	.albumImg {
		position: relative;
		z-index: 2;
	}

	.album-author {
		display: flex;
		align-items: center;
	}



	// 综合艺人区域
	.mv-img::before {
		content: '';
		position: absolute;
		background: url(../../static/icon/play.png)no-repeat center center;
		z-index: 2;
		bottom: 0%;
		left: 0%;
		background-size: 35px;
		opacity: .8;
		width: 100%;
		height: 100%;
	}

	// 综合视频

	// 综合歌单模块


	//查看更多
	.next {
		font-size: 26upx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		padding: 10upx 0;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}



	// 内容曲
	.swiper-item {
		margin-top: 10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0 30upx;
	}




	::webkit-scroll {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>
